import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Card } from 'element-react';
import './index.css';

class Screen extends Component {
  render() {
    return (
      <div className='App'>
        <Card className='box-card'>
          <div className='text item'>
            <Link to={'./mobx'}>Mobx学习</Link>
          </div>
        </Card>
        <Card className='box-card'>
          <div className='text item'>
            <Link to={'./list'}>数据扁平化</Link>
          </div>
        </Card>
        <Card className='box-card'>
          <div className='text item'>
            <Link to={'./fetch'}>Abortable fetch</Link>
          </div>
        </Card>
        <Card className='box-card'>
          <div className='text item'>
            <Link to={'./children'}>Children Api</Link>
          </div>
        </Card>
        <Card className='box-card'>
          <div className='text item'>
            <Link to={'./setstate'}>SetState Api</Link>
          </div>
        </Card>
          <Card className='box-card'>
              <div className='text item'>
                  <Link to={'./lazy'}>Lazy 异步加载</Link>
              </div>
          </Card>
          <Card className='box-card'>
              <div className='text item'>
                  <Link to={'./hoc'}>HOC 高阶组件</Link>
              </div>
          </Card>
      </div>
    );
  }
}

export default Screen;
